<template>
  <div class="signup-form">
    <div class="header">
      <img src="../assets/松树.svg" class="logo">
      <p class="title">树洞</p>
    </div>
    <span class="iconfont icon-guanbi" @click="$emit('closeLogin')"></span>
    <div class="main">
      <input type="text" placeholder="用户名" v-model="username" ref="usernameInput">
      <input type="password" placeholder="密码" v-model="password">
      <p class="error">{{ errorText }}</p>
      <el-button type="success" class="button" @click="submit"
        :disabled="!username.trim() || !password.trim()">登录</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useUserStore } from '../store/user'
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

export default defineComponent({
  emits: ['closeLogin'],
  setup(props, { emit }) {
    const username = ref('')
    const password = ref('')
    const errorText = ref('')

    const User = useUserStore()
    const submit = async () => {
      let userInfo = {
        username: username.value,
        password: password.value
      }
      const result = await User.login(userInfo)
      // 注册成功
      if (result) {
        // 顶部弹出消息
        ElMessage({
          showClose: true,
          message: '登录成功🎉',
          type: 'success',
          duration: 1000
        })
        emit('closeLogin')
      } else {
        errorText.value = '用户名或密码有误😮‍💨'
      }
    }

    const usernameInput = ref()
    onMounted(() => {
      usernameInput.value.focus()
    })

    return { username, password, errorText, submit, usernameInput }
  }
})
</script>

<style lang="less" scoped>
.signup-form {
  background-color: rgba(255, 255, 255, 0.80);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  width: 220px;
  padding: 30px;
  position: fixed;
  top: 60px;
  right: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  z-index: 1;

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    .logo {
      height: 60px;
    }

    .title {
      font-size: 18px;
      font-family: 'Times New Roman', Times, serif;
      font-weight: 700;
    }
  }

  .iconfont {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #5b5b5b;
    cursor: pointer;
  }

  .main {
    input {
      width: 100%;
      height: 36px;
      text-align: center;
      padding: 8px;
      box-sizing: border-box;
      border: 1px solid #949494;
      margin-top: 10px;

      &:focus {
        border: 1px solid #202020;
      }
    }

    .error {
      height: 30px;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #f55151;
    }

    button {
      width: 100%;
      height: 36px;
    }
  }
}
</style>